/**
 * 图片预览弹窗层级修复
 * 修复 Element Plus el-image 组件预览时被表格遮挡的问题
 * 
 * 重要：Element Plus 的图片查看器是直接挂载到 body 下的
 * 需要使用非常高的优先级来覆盖默认样式和内联样式
 */

/* 使用多重选择器和属性选择器提高优先级 - 覆盖所有可能的情况 */
body > div.el-image-viewer__wrapper[style],
body .el-image-viewer__wrapper[style],
div.el-image-viewer__wrapper[style],
.el-image-viewer__wrapper[style],
.el-image-viewer__wrapper {
  z-index: 999999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  inset: 0px !important;
}

body > div.el-image-viewer__mask[style],
body .el-image-viewer__mask[style],
div.el-image-viewer__mask[style],
.el-image-viewer__mask[style],
.el-image-viewer__mask {
  z-index: 999998 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  inset: 0px !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* 所有图片查看器的子元素 */
.el-image-viewer__canvas,
.el-image-viewer__img {
  z-index: 999999 !important;
  position: relative;
}

.el-image-viewer__actions,
.el-image-viewer__btn {
  z-index: 1000000 !important;
}

.el-image-viewer__close {
  z-index: 1000001 !important;
}

/* 重置所有可能冲突的元素的层级 */
.el-table,
.el-table__body-wrapper,
.el-table__header-wrapper,
.el-table__fixed,
.el-table__fixed-right,
.el-card,
.el-card__header,
.el-card__body,
.el-dialog__wrapper,
.el-dialog {
  z-index: auto !important;
}

/* 使用 CSS 层叠上下文隔离页面内容 */
.carousel-list,
.product-integrated-list,
.product-list {
  isolation: isolate;
  position: relative;
  z-index: 0;
}

/* 重置 body 的层叠上下文 */
body {
  position: relative;
  z-index: auto;
}

/* 确保图片预览容器不受限制 */
body > .el-image-viewer__wrapper {
  z-index: 999999 !important;
  isolation: auto !important;
}

